<template>
  <view class="deposit">
    <!-- 头部导航 -->
    <view
      class="w-750 title w-bj-white"
      style="position: fixed; top: 0; left: 0; z-index: 999"
    >
      <view class="h-100 w-row-justify-between-align">
        <view class="wh-80 w-row-center" @click="routerBack()">
          <image class="wh-40" src="@/static/gane/goBack-icon.png"></image>
        </view>
        <view class="h-100 w-row-center w-wz-conts font-36 flex1">
          <text>{{ titlelist[index] }}</text>
        </view>
        <view class="wh-80 w-row-center">
          <uni-datetime-picker
            type="range"
            @change="changeTiem"
          >
            <image class="wh-50" src="/static/gane/rq.png"></image>
          </uni-datetime-picker>
        </view>
      </view>
    </view>
    <view class="bwh-120"></view>
    <!-- 头部导航结束 -->

    <view class="content-box padding-20 disflex w-bj-white" v-if="index == 3">
      <view class=""> 游戏类型： </view>
      <uni-data-select
        class="dataSelct"
        v-model="pageData.game_type"
        :localdata="range"
        @change="gameChange"
      ></uni-data-select>
    </view>

    <view class="content-box padding-top-xs">
      <template v-if="index == 0">
        <view class="van-cell disflex" v-for="i in list">
          <view class="van-cell__title">
            <span class="text-sml">编号: {{ item.orderid }}</span
            ><br />
            <span class="text-xs text-color-grey">{{ item.create_time }}</span>
          </view>
          <view class="van-cell__value">
            <span class="text-default text-bold text-color-black">+123.00</span
            ><br />
            <span class="text-xs text-color-red">失败</span>
          </view>
        </view>
      </template>
      <template v-if="index == 1">
        <view class="van-cell disflex" v-for="i in list">
          <view class="van-cell__title">
            <span class="text-sml">{{ i.notes }}</span
            ><br />
            <span class="text-xs text-color-grey">{{ i.create_time }}</span>
          </view>
          <view class="van-cell__value">
            <span class="text-default text-bold text-color-black"
              >￥{{ i.amoney }}</span
            ><br />
            <span class="text-xs text-color-red">{{ i.status }}</span>
          </view>
        </view>
      </template>
      <!-- 红包 -->
      <template v-if="index == 2">
        <view class="van-cell disflex" v-for="i in list" @click="goHongbao(i)">
          <view class="van-cell__title">
            <span class="text-sml">{{ i.game_name }}</span
            ><br />
            <span class="text-xs text-color-grey">{{ i.createtime }}</span>
          </view>
          <view class="van-cell__value">
            <span class="text-default text-bold text-color-black">
              <span class="text-xs text-color-green" v-if="i.status == 1"
                >+</span
              >
              <span class="text-xs text-color-red" v-if="i.status == 2">-</span>
              ￥{{ i.income_amount }}</span
            ><br />
            <span class="text-xs text-color-red" v-if="i.status == 0"
              >未结算</span
            >
            <span class="text-xs text-color-red" v-if="i.status == 3"
              >平局</span
            >
          </view>
        </view>
      </template>
      <template v-if="index == 3">
        <view class="van-cell disflex" v-for="(i, index) in list" :key="index">
          <view class="van-cell__title">
            <span class="text-sml">{{ i.game_name }}</span
            ><br />
            <span class="text-xs text-color-grey">{{ i.create_time }}</span>
          </view>
          <view class="van-cell__value">
            <span class="text-default text-bold text-color-black"
              >￥{{ i.money }}</span
            ><br />
            <span class="text-xs text-color-red">{{
              orderList[Number(i.status) - 1]
            }}</span>
          </view>
        </view>
      </template>

      <view class="w-300 h-80 w-row-center w-bor-12">
        <text class="w-wz-conts font-28 text-color-black" v-if="isShow"
          >到底了...</text
        >
      </view>
    </view>

    <empty v-if="list.length <= 0" />
  </view>
</template>

<script>
import $H from '@/pages/common/request.js'
import empty from '@/components/empty.vue'
export default {
  components: {
    empty
  },
  data() {
    return {
      titlelist: ['资金明细', '取款记录', '红包记录', '投注记录'],
      range: [
        {
          text: '台湾28',
          value: 'aozhou'
        },
        {
          text: '加拿大28',
          value: 'jianada'
        },
        {
          text: '韩国K3',
          value: 'hgk3'
        },
        {
          text: '极速韩国K3',
          value: 'jshgk3'
        },
        {
          text: '新澳门六合彩',
          value: 'amlhc'
        },
        {
          text: '香港六合彩',
          value: 'xglhc'
        },
        {
          text: '极速六合彩',
          value: 'jslhc'
        },
        {
          text: '加拿大28',
          value: 'jnd28'
        },
        {
          text: '新澳门28',
          value: 'tw28'
        },
        {
          text: '澳门28',
          value: 'els28'
        },
        {
          text: '香港28',
          value: 'gat28'
        }
      ],
      HBrange: [
        {
          text: '接龙',
          value: '1'
        },
        {
          text: '二八杠',
          value: '2'
        },
        {
          text: '扫雷',
          value: '3'
        },
        {
          text: '牛牛',
          value: '4'
        }
      ],
      index: 0,
      type: 1,
      roomId: 0,
      list: [1, 2, 3, 4],
      pageData: {
        pagenum: 1,
        pagesize: 10,
        type: 1,
        room_id: 0,
        start_time: '',
        end_time: '',
        game_type: ''
      },
      total: 0,
      orderList: ['未开奖', '中奖', '未中奖', '撤单'],
      isShow: false
    }
  },
  onLoad(option) {
    this.index = option.index || 0
    this.pageData.type = option.type || 1
    this.pageData.game_type = option.game_type || ''
    this.pageData.room_id = option.roomId || 0
    this.list = []
    this.setGetList()
  },
  onReachBottom() {
    if (this.list.length >= this.total) {
      this.isShow = true
      return
    }
    uni.showLoading({
      title: '加载数据中...'
    })

    this.pageData.pagenum++
    this.setGetList()
    let timer = setInterval(() => {
      uni.hideLoading()
      clearTimeout(timer)
    }, 600)
    console.log('到底了')
  },
  methods: {
    goHongbao(i){
      uni.navigateTo({
        url: "/pages/game/hongbao/detail?id=" + i.issue,
      });


    },
    setGetList() {
      switch (this.index) {
        case '0':
          this.getMoneyLog()
          break
        case '2':
          this.getRedOrder()
          break
        case '3':
          this.getOrder()
          break
      }
    },
    changeTiem(val) {
      this.pageData.start_time = val[0]
      this.pageData.end_time = val[1]
      this.list = []
      this.getRedOrder(true)
    },
    gameChange() {
      this.pageData.pagenum = 1
      this.list = []
      this.setGetList()
    },
    //获取红包投注记录
    getRedOrder() {
      $H.post('/app_red_envelope_order_list', this.pageData).then((res) => {
        if (res.code == 200) {
          this.list.push(...res.data.data)
          this.total = res.data.total
        }
      })
    },
    //获取投注记录
    getOrder() {
      $H.post('/app_user_order_list', this.pageData).then((res) => {
        if (res.code == 200) {
          this.list.push(...res.data.data)
          this.total = res.data.total
        }
      })
    },
    //获取余额明细
    getMoneyLog() {
      $H.post('/app_user_money_log', this.pageData).then((res) => {
        if (res.code == 200) {
          // this.list = res.data.data;
          this.list.push(...res.data.data)
          this.total = res.data.total
          // console.log(this.list, "list");
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
body {
  color: #535d76;
  background-color: #f0f3ff;
  font-size: 3.46667vw;
}

uni-page-body {
  background-color: transparent;
}

.title {
  .w-wz-conts {
    color: #323233 !important;
  }
}

.dataSelct {
  width: auto;
}

.content-box {
  // position: fixed;
  // top: 12.8vw;
  // height: calc(100% - 12.8vw);
  // left: 0px;
  // right: 0px;
  // bottom: 0px;
  // overflow-x: hidden;
  // overflow-y: auto;
  // z-index: 1;
  // padding-bottom: 3.2vw;

  // .van-cell {
  // 	line-height: 1.6;
  // }

  // .van-cell:not(:last-child) {
  // 	margin-bottom: 10rpx;
  // }

  .van-cell__title {
    flex: 1;
  }

  .van-cell__value {
    display: block;
  }
}
</style>